<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <img src="imgs/reg.png" style="width: 100%">
        </el-card>
      </el-col>
      <el-col :span="12">
          <el-form label-width="100px" style="margin-top: 30px">
            <el-form-item>
              <h1 style="font-size: 40px">立即注册
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="login" style="font-size: 20px;
                float: right;color: #0aa1ed;text-decoration: none">已有账号?立即登录</router-link>
              </h1>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="text" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input type="text" placeholder="请输入昵称" v-model="user.nickname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reg()">注册</el-button>
            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import {ref} from "vue";
import axios from 'axios'
import qs from 'qs'
import router from "@/router"; //查询字符串框架

const user=ref({username:"",password:"",nickname:""})
const reg=()=>{
  //把user对象转成查询字符串
  let data=qs.stringify(user.value);
  //发出post请求,因为服务器没有添加@requesBody注解,请求的参数必须为查询字符串格式
  axios.post('http://localhost:8080/v1/users/reg',data)
    .then((response)=>{
      if (response.data.code==1){
        alert("注册成功")
        router.push('/login')//注册成功跳转到登录页面
      }else {
        alert(response.data.msg)
      }
    })
}
</script>

<style scoped>

</style>